<!DOCTYPE html>
<html lang="pt-BR">
	<head>
      <meta charset="utf-8"/>
      <title>Background em um texto só com CSS? Ué, sim! - CSS, Julio Lira, Frontend</title>	
      <!--link rel="icon" type="image/png" href="img/favicon.png" /-->
      <meta name="viewport" content="width=device-width, user-scalable=no"/>
      <link rel="stylesheet" href="https://jul10l1r4.github.io/Texto-farmatacao/principal.css"/>
      <link rel="stylesheet" href="../../css/layout.css"/>
      <meta name="author" content="Julio Lira"/>
			<link rel="icon" href="../../assets/jl.png" />
      <meta name="robots" content="index, follow">
      <meta property="og:site_name" content="https://jul10l1r4.github.io/" />
      <meta property="og:url" content="https://jul10l1r4.github.io/artigos/background-em-texto/" />
      <meta name="description" content="Olá, sou um desenvolvedor que já a um bom tempo trabalho com produção de sites 💻 ⌨️ 🖥, blogues APIs entre outras, sou um entusiasta pelo paradigma funcional amo viajar e fotografar, escrever, pensar na vida e tal, sou desenvolvedor e pensante nas horas vagas meu nome nas redes sociais é jul10l1r4"/>
      <meta name="keywords" content="segurança, security,sec, osec,roadsec,hack,hacking,pentest,web, invasion,RE,Julio Lira,http, https, erro, error, mensagem, criar, 404, html, php, c, css, javascript, java, go, python, haskell, git, not a bug, jul10l1r4, Julio Lira, br, zueira, memes, meme, mene, risos, rs, huehuehue, kkk, kkkkkkj, perdi a criatividade kkdkd, http, http meme resposta, api meme, api resposta, rootthings, root things, rootings"/>
      <meta property="og:title" content="Oi, meu nome Julio, sou desenvolvedor web ah 7 anos 📱💻 ⌨️ 🖥">
      <meta property="og:image" content="css.jpeg"/>
      <meta property="og:description" content="Muitos códigos, não? Hahaha, sim apenas três linhas de códigos! muito facil, eu disse que era, e foi por isso que até agora não acredito!"/>
      <meta property="og:author" content="Julio Lira"/>
  <!-- twitter metatags-->
  <meta name="twitter:card" content="summary_large_image">
  <meta name="twitter:title" content="Background em um texto só com CSS? Ué, sim! - CSS, Julio Lira, Frontend">
  <meta name="twitter:description" content="Muitos códigos, não? Hahaha, sim apenas três linhas de códigos! muito facil, eu disse que era, e foi por isso que até agora não acredito!">
  <meta name="twitter:image" content="css.jpeg">
			<script src="../../Ecmascript/analiz.js"></script>
			<script defer src="../../Ecmascript/scroll.js"></script>
<!-- Facilitar indexação de ferramentas de busca --->
	<script type="application/ld+json">
{
	"name":"Julio Lira",
	"description":"Sim, e eu não acredito ainda que é possível isso!",
	"author":"Julio Lira",
	"@type":"Organization",
	"url":"https://jul10l1r4.github.io/artigos/background-em-texto/",
	"image":"https://instagram.fnat2-1.fna.fbcdn.net/vp/c86b9975b58d82a3e5ea3526131a8d2a/5B146E0F/t51.2885-15/e35/26868816_181404315800705_76975572110016512_n.jpg",
	"headline":"Julio Lira",
  "@context":"http://schema.org",
  "contactPoint": {
					"@type": "ContactPoint",
					"email": "jul10l1r4@ufrn.edu.br"
				}
}
		 </script>
			
    </head>
    <body>
			<header class="dev" id="top">
				<div id="to">
			    <h1>Background em um texto só com três linhas de CSS? Ué, sim!
						<!--img src="https://emojipedia-us.s3.amazonaws.com/thumbs/160/facebook/111/smirking-face_1f60f.png"/-->
					</h1>
				</div>
			</header>
			<a id="down" href="#conteudo">_Coloque gif no fundo de um texto</a>
			<section class="medium-text">
				<h1 id="conteudo">Sim, e eu não acredito ainda que é possível isso!</h1>
				<p>
				 Olá <span class="emoj">✌🏾 </span>, estava eu olhando flyers, e já a muito tempo me sinto limitado na web por não conseguir colocar uma imagem de fundo em um texto, e, me lembro que um dia             procurei mesmo fazer isso de todas as formas e não consegui, até que nesta semana eu me dediquei e nem que eu precisasse fazer uma gambiarra eu iria fazer, e lendo no site da webkit.org  vi  uma possibilidade, sim o exemplo estava errado neste artigo, mas notei que tinha como "reduzir" o background ao fundo de um texto, foi neste <a href="https://webkit.org/blog/164/background- clip-text/" target="_blank">artigo oficial</a>.
				</p>
				<p>
					E quando eu olhei, eu fiquei triste, porque foram apenas esperanças jogadas foras, mas estava sem mais o que fazer e pesquisei o que faria o <code>background-clip</code> e olhei na <a href="https://developer.mozilla.org/pt-BR/docs/Web/CSS/background-clip" target="_blank">MDN</a> e ainda não acreditando eu resolvi testar, e <span class="emoj">🤤</span>
				</p> 
				<hr/>
				<h1>PEGOOOOOUUU, AAAAAH!</h1>

				<figure>
					<img src="Happy-GIF.gif" alt="Eu sou mais feliz do que todos vocês"/>
					<figcaption>Eu pensei, TUDO MUDOOU, MINHA VIDA NÃO É MAIS A MESMA <span class="emoj">😍</span>!</figcaption>
				</figure>
				<p>
					HOJE SOU UMA PESSOA FELIZ 🍃, e após me acalmar eu pensei
				</p>
				<blockquote>Ok, agora que me acalmei, vamos testar diferentes formatos de imagens.</blockquote>
				<p>
					PNG, tudo certo, JPEG tudo ok, PNGs trasparentes, perfeito, e entrei em total tensão quando pensei, será que pega gif? Então decidi testar, e
				</p>
				<figure>
					<img src="a.jpeg" alt="ALEGRIA, pqp"/>
					<figcaption>FUNCIONOOOOOUUUU, VOU ANOTAR ESTA DATA EM MINHA AGENDAAAAAA</figcaption>
				</figure>
				<p>
					MEU DESUS, EU NÃO ACREDITOOO!
				</p>
				<h1>VEJA COMO É</h1>
				<h2>Como funciona</h2>
				<p>
					Basicamente, existe uma imagem de fundo e o código que eu já havia dito, o <code>background-clip</code> ele fará com que o fundo de fato seja dentro da imagem, assim como um papel furado, e o fundo será a parte de trás do papel entende? algo assim:
				</p>
				<figure>
					<img src="papel.jpeg" alt="imagem por trás de um papel rasgado">
					<figcaption>Este é o que seria a cor do texto, porém não é apenas uma cor, mas é uma imagem!</figcaption>
				</figure>
				<h2>Vamos aos códigos</h2>
				<p>
					E você que não leu o texto e veio logo a este tópico deve está pensando:
					<blockquote>Nossa, deve ser trilhóes de linhas de códigos</blockquote>
					Veja agora mesmo:
				</p>
				<figure>
					<script src="https://gist.github.com/Jul10l1r4/28ab71667d33e1bae8a36f9178e9fd43.js"></script>
					<figcaption>Muitos códigos, não? </figcaption>
				</figure>
				<p>
					A imagem que eu utilizei foi esta imagem <a href="https://media.giphy.com/media/JGQe5mxayVF04/giphy.gif" target="_blank">aqui</a>, veja como fica este códigozinho:
				</p>
				<figure>
					<p data-height="146" data-theme-id="0" data-slug-hash="oEWNrZ" data-default-tab="result" data-user="Jul10l1r4" data-embed-version="2" data-pen-title="oEWNrZ" class="codepen">See the Pen <a href="https://codepen.io/Jul10l1r4/pen/oEWNrZ/">oEWNrZ</a> by Julio Lira (<a href="https://codepen.io/Jul10l1r4">@Jul10l1r4</a>) on <a href="https://codepen.io">CodePen</a>.</p>
					<script async src="https://production-assets.codepen.io/assets/embed/ei.js"></script>
						<figcaption>Gostou? a cor ficou muito escura né?! enfim, faça como quiser, use para você</figcaption>
				<p>
				 Enfim, hoje será um dia marcado em minha vida, e acredito que na sua também né?! Eu fiquei extremamente alegre depois dessa descoberta
				</p>
				<h2>Esta será a reação de quando verem você mesmo usando em qualquer coisa</h2>
				<figure>
				  <img src="julio.gif" alt="Vendo fundo em um textoo!"/>
					<figcaption><span class="emoj">HAHAHA😉</span></figcaption>
				</figure>
				<p>
					Enfim, era isso... boas práticas
				</p>
			</section>
			<footer class="separador-top top6">
       <br/>
				<a href="https://jul10l1r4.github.io/artigo/scroll-com-uma-linha-css/">
					← Efeito Scroll com uma linha, CSS3
				</a>
        |
				<a href="http://jul10l1r4.github.io/HTTP_-_Resposta/">
					Mantenha a segurança de sua página, HTTP Meme resposta →
				</a>
			</footer>
    </body>
  </html>
